<template>
  <div class="window" @mousedown="windowFocus"
       :style="{top:windowStyle.top+'px',
                left:windowStyle.left+'px',
                zIndex:window.zIndex,
                width:windowStyle.width+'px',
                height:windowStyle.height+'px'}">
    <window-tool style="position: absolute;" :title="window.title" @mousedown="windowMove"
                 @close="windowClose" :icon="window.icon"></window-tool>
    <view-iframe :window-id="window.windowId" :src="window.url" style="position: absolute;top: 20px"
                 :moving="moving" :sizeMoving="sizeMoving"></view-iframe>
    <div v-if="window.changeSize" class="size-tool bottom" @mousedown="sizeMoveBegin($event,'bottom')"></div>
    <div v-if="window.changeSize" class="size-tool left" @mousedown="sizeMoveBegin($event,'left')"></div>
    <div v-if="window.changeSize" class="size-tool right" @mousedown="sizeMoveBegin($event,'right')"></div>
  </div>
</template>

<script>
import windowTool from "./components/windowTool"
import viewIframe from "./components/viewIframe"
import sys from "../../js/windowApi"

export default {
  name: "window",
  props: {
    window: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      windowStyle: {
        top: 200,
        left: 300,
        width: 500,
        height: 500,
      },
      moving: false,
      sizeMoving: false,
      sizeMoveType: null,
      originPosition: {
        x: 0,
        y: 0,
        windowX: 0,
        windowY: 0,
        windowWidth: 0,
        windowHeight: 0,
      },
      sizeLimit: {
        width: 100,
        height: 100,
      }
    }
  },
  created() {
    console.log("----",this.window)
    this.windowStyle.width=  this.window.size.width
    this.windowStyle.height=  this.window.size.height
    this.sizeLimit.width=  this.window.size.minWidth
    this.sizeLimit.height=  this.window.size.minHeight

  },
  methods: {
    windowClose() {
      this.window.publishEvent("windowClose")
    },
    windowFocus() {
      this.window.publishEvent("windowFocus")
    },
    windowMove(e) {
      this.moving = true;
      this.originPosition.x = e.clientX
      this.originPosition.windowX = this.windowStyle.left
      this.originPosition.y = e.clientY
      this.originPosition.windowY = this.windowStyle.top
    },
    sizeMoveBegin(e, type) {
      this.sizeMoving = true;
      this.sizeMoveType = type
      this.originPosition.x = e.clientX
      this.originPosition.windowX = this.windowStyle.left
      this.originPosition.windowWidth = this.windowStyle.width
      this.originPosition.y = e.clientY
      this.originPosition.windowY = this.windowStyle.top
      this.originPosition.windowHeight = this.windowStyle.height

    },
    //左边大小改变
    sizeLeft(x, y) {
      let width = this.originPosition.windowX - x + this.originPosition.windowWidth
      if (width >= this.sizeLimit.width) {
        this.windowStyle.width = width
        this.windowStyle.left = this.originPosition.windowX + x - this.originPosition.x
      }
    },
    sizeRight(x, y) {
      let width = x - this.originPosition.windowX
      if (width >= this.sizeLimit.width) {
        this.windowStyle.width = width
      }
    },
    sizeBottom(x, y) {
      let height = y - this.originPosition.windowY
      if (height >= this.sizeLimit.height) {
        this.windowStyle.height = height
      }
    },
    sizeMove(e) {
      let x = e.clientX;
      let y = e.clientY;
      if (this.sizeMoveType === 'left') {
        this.sizeLeft(x, y)
      }
      if (this.sizeMoveType === 'right') {
        this.sizeRight(x, y)
      }
      if (this.sizeMoveType === 'bottom') {
        this.sizeBottom(x, y)
      }
    },
    move(e) {
      let x = e.clientX;
      let y = e.clientY;
      this.windowStyle.top = this.originPosition.windowY + y - this.originPosition.y
      this.windowStyle.left = this.originPosition.windowX + x - this.originPosition.x
    },
  },
  mounted() {
    window.addEventListener("mouseup", () => {
      this.moving = false
      this.sizeMoving = false
    }, true)
    window.addEventListener("mousemove", (e) => {
      if (this.moving) {
        this.move(e);
      }
      if (this.sizeMoving) {
        this.sizeMove(e)
      }
    })
  },
  components: {
    windowTool, viewIframe
  },
  destroyed() {
  }
}
</script>

<style scoped>
.window {
  position: absolute;
  background-color: silver;
}

.size-tool {
  position: absolute;
}

.bottom {
  bottom: 0px;
  height: 5px;
  width: 100%;
  /*background-color: #de5454;*/
}

.left {
  left: 0;
  width: 5px;
  height: calc(100% - 20px);
  top: 20px;
}

.left:hover {
  cursor: ew-resize;
}

.right:hover {
  cursor: ew-resize;

}

.bottom:hover {
  cursor: ns-resize;
}

.right {
  right: 0;
  width: 5px;
  height: calc(100% - 20px);
  top: 20px;
}
</style>